<template>
    <div class="sign page">
        <div class="con">
            <div class="title">
                <div class="top">
                    每日签到
                </div>
                <div class="bottom" @click="toType">
                    <img src="./tl.png" alt="" class="im">
                    <span class="desc" style="color:#FF533A">点我购买优惠产品</span>
                    <img src="./tr.png" alt="" class="im">
                </div>
            </div>

            <div class="day">
                <div class="gl">
                    <span class="point">{{sign.sumCount}}天</span>
                    <span class="desc">累计签到</span>
                </div>
                <div class="main">
                    <div class="sum_day">
                        <span class="desc">已连续签到</span>
                        <div class="text">
                            <span class="num">{{sign.count}}</span>
                            <span class="tx">天</span>
                        </div>
                    </div>
                    <div class="items">
                        <div class="item" v-for="(d,index) in days" :key="index">
                            <img v-if="d<=sign.count" src="./g1.png" alt="" class="gg">
                            <img v-else src="./g2.png" alt="" class="gg">
                            <div class="sp"></div>
                        </div>
                    </div>
                    <div class="days">
                        <span class="dd" v-for="(d,index) in days" :key="index">第{{d}}天</span>
                    </div>

                    <div class="btn" @click="confirmSign">
                        立即签到
                    </div>

                    <div class="remark">积分最终解释权归公司所有</div>

                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import {sign,signInfo} from "../../api/point";
    import * as Dialog from '@/dialog'
    export default {
        name: "index",
        activated() {
            signInfo().then(res=>{
                if(res.data){
                    this.sign=res.data
                }

            })
        },
        methods:{
            toType(){
              this.$router.push({
                  path:'/goodslist',
                  query:{
                      type:0,
                      saletype:4
                  }
              })
            },
            confirmSign(){
                sign().then(res=>{
                    Dialog.showCorrect("签到成功!")
                    this.sign = res.data
                })
            }
        },
        data() {
            return {
                days: [1, 2, 3, 4, 5, 6, 7],
                sign:{
                    sumCount:0,
                    count:0
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .sign
        .con
            min-height 100%
            background-color #F0C808
            padding 10px 10px 0

            .title
                display flex
                align-items center
                flex-direction column

                .top
                    font-size: 35px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);

                .bottom
                    display flex
                    align-items center
                    margin-top 15px

                    .im
                        height 11px
                        width 38px

                    .desc
                        margin 0 11px
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 300;
                        color: rgba(255, 255, 255, 1);

            .day
                margin-top 15px
                display flex
                align-items center
                flex-direction column

                .gl
                    z-index 1
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    display flex
                    align-items center
                    flex-direction column
                    justify-content center
                    background url("gl.png") no-repeat
                    background-size 100% 100%
                    width 145px
                    height 140px

                    .point
                        font-size 23px
                        margin-bottom 11px

                .main
                    margin-top -20px
                    width 100%
                    background-color white
                    border-radius 7px
                    display flex
                    align-items center
                    flex-direction column

                    .sum_day
                        display flex
                        align-items center
                        flex-direction column
                        margin-top 30px

                        .desc
                            font-size: 15px;
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: rgba(119, 119, 119, 1);

                        .text
                            display flex
                            align-items flex-end
                            justify-content center
                            margin-top 6px
                            width 290px
                            height 95px
                            background url("./date.png") no-repeat
                            background-size 100% 100%
                            color #FF533A
                            vertical-align bottom
                            padding-bottom 55px

                            .num
                                font-size 33px
                                line-height 28px

                            .tx
                                margin-left 5px
                                font-size 15px
                                font-weight 100

                    .items
                        margin-top 10px
                        display flex
                        width 100%
                        padding-left 25px

                        .item
                            display flex
                            align-items center
                            justify-content center
                            flex 1

                            .gg
                                width 20px
                                height 20px

                            .sp
                                margin 0 5px
                                flex 1
                                height 1px
                                width: 17px;
                                background: rgba(255, 197, 189, 1);

                            &:last-child
                                .sp
                                    visibility hidden

                    .days
                        margin-top 10px
                        font-size: 11px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: rgba(143, 143, 143, 1);
                        width 100%
                        display flex

                        .dd
                            text-align center
                            flex 1

                    .btn
                        margin-top 20px
                        background url("./btn.png")
                        background-size 100% 100%
                        width: 250px;
                        height: 45px;
                        font-size: 17px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                        text-align center
                        line-height 45px

                    .remark
                        font-size: 15px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: rgba(165, 165, 165, 1);
                        margin 20px 0

</style>
